<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/agate.min.css" rel="stylesheet">-->
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/monokai.min.css" rel="stylesheet">-->
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/monokai-sublime.min.css" rel="stylesheet">-->
    <!--
        ↓↓没错 这个就是你最喜欢的webstorm屎黄色主题
    -->
    <!--这一款要蓝一点,另外css解析得不好-->
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/androidstudio.min.css" rel="stylesheet">-->
    <!--这一款要黄一点,css解析良好-->
    <link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/darcula.min.css" rel="stylesheet">
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/railscasts.min.css" rel="stylesheet">-->


    <!--<link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/atelier-cave-light.min.css" rel="stylesheet">-->
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/atelier-dune-light.min.css" rel="stylesheet">-->
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/atelier-estuary-light.min.css" rel="stylesheet">-->
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/atelier-forest-light.min.css" rel="stylesheet">-->
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/atelier-sulphurpool-dark.min.css" rel="stylesheet">-->
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/atelier-sulphurpool-light.min.css" rel="stylesheet">-->
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/color-brewer.min.css" rel="stylesheet">-->
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/default.min.css" rel="stylesheet">-->
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/github-gist.min.css" rel="stylesheet">-->
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/github.min.css" rel="stylesheet">-->
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/obsidian.min.css" rel="stylesheet">-->

    <!--↓怀旧时光-->
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/pojoaque.min.css" rel="stylesheet">-->

    <!--↓作业本主题-->
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/school-book.min.css" rel="stylesheet">-->

    <!--<link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/solarized-light.min.css" rel="stylesheet">-->
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/vs2015.min.css" rel="stylesheet">-->
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/xt256.min.css" rel="stylesheet">-->
    <!--<link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/zenburn.min.css" rel="stylesheet">-->
    <title>Document</title>
</head>
<body>
<pre>
    <!--<code class="language-js">-->
    <!--<code class="lang-js">-->
    <code>
let a = 123;
console.log(a);
function abc(){}
class bb{}
for(let i=0;i<3;++i){
    console.log(i)
}
console.log(a)
const a = require('hightlight.js')
    </code>
</pre>

<pre>
    <!--<code class="lang-html">-->
    <code class="html">
&lt;a class="a123"&gt;我是a标签&lt;/a&gt;
&lt;p&gt;我是p标签&lt;/p&gt;
    </code>
</pre>

<pre>
    <code>
a {
color:red;
background: url("./1.png");
}
    </code>
</pre>


<!-- 仍然会有背景色 -->
<pre>
    <code class="plaintext">
let a = 123;
console.log(a);
function abc(){}
class bb{}
    </code>
</pre>

<!-- 连背景色都没有了,和普通纯html字符没撒两样 -->
<pre>
    <code class="nohighlight">
let a = 1;
console.log(a);
function abc(){}
class bb{}
    </code>
</pre>

<script src="https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js"></script>
<!--
This will find and highlight code inside of <pre><code> tags; it tries to detect the language automatically. If automatic detection doesn’t work for you, you can specify the language in the class attribute:

initHighlightingOnLoad 会高亮 <pre><code>...</code></pre> 里的内容,highlight会自动检测语言的类型,如果自动检测没用,你可以在code标签上通过class属性手动指定语言的类型
-->

<script>hljs.initHighlightingOnLoad();</script>
<!--↑等价于↓-->
<!--<script>
    document.addEventListener('DOMContentLoaded', () => {
        const codeArr = document.querySelectorAll('code');
        codeArr.forEach(block => {
            console.log(block.textContent);
            block.innerHTML = hljs.highlightAuto(block.textContent).value;
            //block.innerHTML = hljs.highlight('javascript',block.textContent).value;
        });
    });

    //但 initHighlightingOnLoad 还会在 <code>上添加 class="hljs javascript"
</script>-->
</body>
</html>
